<template>
    <div>
        <div class="center-all clearfix">
            <van-row class="cz-title">
                <van-col span="8">
                    <img class="fl icon_return" src="../../assets/image/center/jtb.png" alt=""
                         @click="$router.back(-1)">
                </van-col>
                <van-col span="8" class="text-align-c font-36">钻石充值</van-col>
                <van-col span="8" class="text-align-r">
                    <router-link tag="span" class="font-3" :to="{name:'records',params:{recordsId:'1111'}}">交易记录
                    </router-link>
                </van-col>
            </van-row>
            <div class="binding-phone" v-if="phone == '' || phone == undefined">
                <img class="gantanhao fl" src="../../assets/image/center/icon_tips.png" alt="">
                <span class="fl color-3 binding-wenan">为了您的账户安全,建议您尽快去绑定手机号</span>
                <router-link tag="span" :to="{name:'updatePhone'}" class="go-binding fl">去绑定</router-link>
                <img class="fl icon_close" src="../../assets/image/center/icon_close.png" alt="" @click="phone = -1">
            </div>
            <div class="center-all-img clearfix">
                <span class="my-income color-default text-align-c">{{diamondBalance}}</span>
                <span class="my-income-zi text-align-c color-6 font-28">剩余(钻石)</span>
                <div class="income-list-box clearfix">
                    <div class="income-list-tab list-tab1">
                        <span class="fl font-28 color-3 font-bold">请选择充值金额</span>
                    </div>
                    <van-row gutter="15">
                        <van-col span="8" v-for="(item,index) in diamondData" :key="index" :class="[index > 2 ? 'paddingTop15' : '',active == index ? 'active' : '']">
                            <div class="zuanshi-box position-r" @click="activeClick(index,item)">
                                <span class="zuanshi-box-span color-9">
                                    <img class="fl" src="../../assets/image/center/img_diamonds_s.png" alt="" srcset="">
                                    <em class="fl font-28">{{item.name}}</em>
                                </span>
                                <span class="font-34">￥{{item.price}}</span>
                                <span class="song text-align-r font-11">
                                    送{{item.present}}钻
                                </span>
                            </div>
                        </van-col>
                    </van-row>
                    <span class="songzhan font-24 text-align-c color-9">充值金额可购买：{{diamond}}钻，额外赠送 {{presentDiamond}}钻</span>
                    <input type="number" class="input-zuan text-align-c" maxlength="10" placeholder="请输入其他金额" v-model="otherMoney" @input="otherInput()"/>
                    <ul class="zhifu-box clearfix">
                        <li class="clearfix">
                            <div class="income-list-tab">
                                <span class="fl font-28 color-3 font-bold">选择支付方式</span>
                            </div>
                        </li>
                        <li class="clearfix" v-for="(item,index) in zhifuType" :key="index" @click="zhifu(index)">
                            <img v-if="index==0" class="fl fangshi" src="../../assets/image/center/icon_zfb.png" alt="">
                            <img v-else-if="index==1" class="fl fangshi" src="../../assets/image/center/icon_wx.png" alt="">
                            <img v-else class="fl fangshi" src="../../assets/image/center/icon_recharge.png" alt="">
                            <span class="fl zfb font-3">{{item}}<em v-if="index==2" class="font-22 color-9">（余额:￥{{recharge}}）</em></span>
                            <img class="fr xuanze" v-if="zfType == index" src="../../assets/image/center/icon_select.png" alt="" srcset="">
                            <img class="fr xuanze" v-else src="../../assets/image/center/icon_unchecked.png" alt="" srcset="">
                        </li>
                        <li @click="selectYu()">
                            <van-cell class="padding0">
                                <i class="quan" :class="[yuESelect ? 'yuESelect' : '']"></i>
                                <span class="fl">余额支付</span>
                                <span class="fl color-9">（余额：￥{{recharge}}）</span>
                            </van-cell>
                        </li>
                        <li class="clearfix color-9 font-2">
                            充值钻石即可购买礼物，不可用于下单和提现
                        </li>
                    </ul>
                    <span class="fabu-dynamic text-align-c top-up-zhifu" @click="qurenzhifu()">确认支付{{money}}</span>
                </div>
            </div>
        </div>
        <van-popup v-model="isDatetime" position="bottom" :overlay="true">
            <van-datetime-picker v-model="currentDate" type="year-month" :formatter="formatter" @confirm="confirmData"
                                 @cancel="isDatetime = !isDatetime"/>
        </van-popup>
    </div>
</template>
<script>
    import apiHttp from '../../api/index'
import { Toast } from 'vant';
    export default {
        data() {
            return {
                currentDate: new Date(),
                isDatetime: false,
                diamondData:[],
                phone:this.$route.query.phone,
                port:'Android',//端口
                diamondBalance:'',//剩余钻石
                zhifuType:['支付宝支付','微信支付'],
                zfType:-1,//默认是余额支付
                active:0,
                money:'',//金额
                otherMoney:'',
                diamond:0,//输入金额购买的钻石数量
                presentDiamond:0,//赠送钻石
                recharge:0,//账户余额
                payType:'',//支付类型 "1微信公众号 2微信H5 3微信APP；" +"10支付宝;  100余额支付  101代币（钻石）支付"
                source:'1',//1APP 2IOS 3WEB
                yuESelect: true,
                autoCost:false,//扣不扣余额
                iosPalyId:''
            }
        },
        //页面加载
        mounted(){
            this.rechargeListIOS();
            this.getUserWalletDetail();
        },
        methods: {
            // 支付方式选择
            zhifu(index){
                if(this.money<this.recharge){
                    if(this.yuESelect == false){
                        this.zfType = index
                    }else{
                        this.zfType = -1

                    }
                }else{
                    this.zfType = index
                }
            },
            selectYu(){
                if(this.money>this.recharge){
                    this.yuESelect=!this.yuESelect;
                }else{
                    this.yuESelect=!this.yuESelect;
                    if(this.yuESelect){
                        this.zfType = -1
                    }else{
                        this.zfType = 0
                    }
                }
            },
            //获取钻石购买列表
            rechargeListIOS() {
                let that = this;
                let data={

                    type:1,
                    source:1            // 1是安卓      2是IOS
                }
                apiHttp.apiCenter.rechargeListIOS(data,resp=> {
                    let ids = ['play_201818','play_2018108','play_2018208','play_2018518','play_20181098','play_20182298']
                    if(resp.code==200){
                        for(let i in resp.data){
                            resp.data[i].id = ids[i]
                        }
                        that.diamondData=resp.data
                        that.money=that.diamondData[0].price
                        that.iosPalyId = that.diamondData[0].id
                    }
                })
            },

            //查询会员账户余额
            getUserWalletDetail(){
                let that = this;
                apiHttp.apiCenter.getUserWalletDetail('',resp=> {
                    if(resp.code==200){
                        that.recharge = resp.data.recharge;
                        that.diamondBalance = resp.data.credits;
                    }else{
                        Toast(resp.message)
                    }

                })
            },
           // 会员其他金额购买钻石计算查询
            getOtherMoneyDiamond(){
                let that = this;
                var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
                if(that.otherMoney==0||that.otherMoney==""||that.otherMoney<1||!reg.test(that.otherMoney)){
                    that.diamond=0;
                    that.presentDiamond=0;
                    that.money='';
                }
                let url = '?money='+that.otherMoney+'&source='+that.source+'';
                apiHttp.apiCenter.getOtherMoneyDiamond(url,'',resp=> {
                    if(resp.code==200){
                        that.diamond = resp.data.finalMoney;
                        that.presentDiamond =  resp.data.present;
                    }
                })
                that.money=that.otherMoney;
                if( that.money>this.recharge){//如果余额不够，默认选择支付宝支付，选中余额支付
                    that.zfType=0;
                }else{
                    //选中余额支付，禁用单选按钮支付宝支付和微信支付
                    this.zfType = -1
                }
            },
            //选中购买钻石金额
            activeClick(index,item){
                let that = this;
                that.iosPalyId = item.id
                that.active = index
                that.money = item.price;
                that.otherMoney = '';
                if(that.money>that.recharge) {//如果余额不够，默认选择支付宝支付，选中余额支付
                    that.zfType = 0;
                }else{
                   //选中余额支付，禁用单选按钮支付宝支付和微信支付
                    that.zfType = -1
                    this.yuESelect = true
                }
            },
            //金额输入事件
            otherInput(){
                let that = this;
                if(this.otherMoney>50000){
                    Toast("单笔最高充值金额50000元！")
                    //this.otherMoney='';
                }
                var nums = this.otherMoney.split('.');
                if(nums.length>1){
                    if(nums[1].length>2){
                        Toast("只支持2位小数，请重新输入")
                        this.otherMoney = '';
                    }
                }
                if(this.otherMoney){
                    this.active = -1;
                }
                that.getOtherMoneyDiamond();
            },
            //确认支付
            qurenzhifu(){
                let that = this;
                var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
                if(that.active == -1&&(that.otherMoney==""||that.otherMoney<1||!reg.test(that.otherMoney))){
                    Toast("请选中或输入购买钻石金额，不能小于1.00");
                }
                if(that.yuESelect==false&&that.zfType==-1){
                    Toast("请选择支付类型");
                }
                if(that.zfType==0&&that.yuESelect==false){
                    //支付宝接口
                    that.payType=10;
                    that.autoCost=false;
                    that.creditsPay();

                }else if(that.zfType==1&&that.yuESelect==false){
                    //微信支付
                    that.payType=2;
                    that.autoCost=false;
                    that.creditsPay();
                }
                if(that.yuESelect==true&&that.zfType==0){
                    //支付宝接口
                    that.payType=10;
                    that.autoCost=true;
                    that.creditsPay();
                }else if(that.yuESelect==true&&that.zfType==1){
                    //微信支付
                    that.payType=2;
                    that.autoCost=true;
                    that.creditsPay();
                } else {
                    //余额支付
                    that.payType='';
                    that.autoCost=true;
                    that.creditsPay();
                }
            },
            creditsPay(){
                let that = this;
                let data={
                    money:that.money,//金额
                    payType:that.payType,//支付类型
                    count:1,
                    source:that.source,
                    autoCost:that.autoCost

                }
                apiHttp.apiCenter.creditsPay(data,resp=> {
                    if (resp.code == 200) {
                        Toast("支付成功！");
                        this.getUserWalletDetail()
                    }else{
                        Toast(resp.message)
                    }
                })
            },
            formatter(type, value) {
                if (type === 'year') {
                    return `${value}年`;
                } else if (type === 'month') {
                    return `${value}月`
                } else {
                    return value;
                }
            },
            confirmData(data) {
                let endvalue = new Date(data)
                this.isDatetime = !this.isDatetime
            }
        }
    }
</script>

<style scoped>
.quan{
    width: .6rem;
    height: .6rem;
    display: block;
    float: left;
    border:solid 1px #eee;
    border-radius: 50%;
    margin-right: .5rem;
    margin-top: .1rem;
}
.yuESelect{
    background-color: #D84F4D;
}
.padding0{
    padding-left: 0;
    padding-right: 0;
}
.chongzhi{
    border:#D84F4D .04rem solid;
    display: inline-block;
    height: .7rem;
    line-height: .75rem;
    font-size: .5rem;
    width: 1.9rem;
    text-align: center;
    border-radius: .4rem;
    margin-top: .1rem;
}
.paddingTop15{
    padding-top:.5rem;
}
    .center-all {
        background: url(http://132.232.13.213/gaochen/img_zs_bj.png);
        background-position:top center;
        background-repeat: no-repeat;
        background-size: 100% 36%;
        width: 100%;
    }
    .cz-title {
        height: 1.36rem;
        line-height: 1.36rem;
        padding: .2rem .6rem 0 .6rem;
        width: calc(100% - 1.2rem);
        color: #fff;
    }

    .icon_return {
        width: .8rem;
        margin-top: .28rem;
    }

    .my-income {
        font-size: 1.2rem;
        display: block;
        height: 2rem;
        line-height: 2.4rem;
        padding-top: 2rem;
        color: #fff;
    }

    .my-income-zi {
        display: block;
        color: #FFAFAE;
    }

    .income-list-box {
        width: calc(100% - 1.2rem);
        padding: 3rem .6rem 0 .6rem;
    }

    .income-list-tab {
        height: 1rem;
        line-height: 1rem;
        padding: .2rem;
    }
    .list-tab1{
        margin-top: 1.4rem;
    }
    .zuanshi-box {
        padding: .4rem;
        width: calc(100% - .8rem);
        border: solid .04rem #f5f5f5;
        border-radius: .45rem;
    }

    .zuanshi-box-span {
        width: 100%;
        display: block;
        height: .6rem;
        color: #FFB400;
    }

    .zuanshi-box-span img {
        width: .6rem;
        padding-right: .2rem;
    }

    .zuanshi-box-span em {
        height: .6rem;
        line-height: .6rem;
        display: inline-block;
    }

    .zuanshi-box .song {
        position: absolute;
        right: 0;
        top: 0;
        background-image: url(../../assets/image/center/img_bj_u.png);
        background-repeat: no-repeat;
        background-size: 100%;
        min-width: 2rem;
        height: .8rem;
        padding-right: .2rem;
        display: block;
        color: #fff;
       /*  font-size: .3rem; */
        padding-left: .2rem;
    }
    .active .zuanshi-box>span:nth-child(2){
        color: black;
    }
    .active .zuanshi-box {
        border: solid .04rem #D84F4D;
    }
    .zuanshi-box>span:nth-child(2){
        color: #999;
    }
    .songzhan {
        height: 2rem;
        line-height: 2rem;
        display: block;
    }

    .input-zuan {
        height: 1rem;
        line-height: 1rem;
        width: 100%;
        display: block;
        border: solid .04rem #f5f5f5;
        border-radius: .2rem;
        font-size: .6rem;
        padding: .3rem 0;
    }

    .input-zuan::-webkit-input-placeholder {
        color: #999;
        font-size: .6rem;
    }

    .zhifu-box li {
        width: 100%;
        padding-bottom: .4rem;
        margin: 0.2rem 0;
    }

    .fangshi {
        width: 1rem;
    }

    .zfb {
        height: 1rem;
        line-height: 1rem;
        display: inline-block;
        padding-left: .4rem;
    }

    .xuanze {
        width: .8rem;
    }

    .top-up-zhifu {
        margin: 1rem 0;
    }
.binding-phone{
    position: absolute;
    left: .6rem;
    top:1.6rem;
    width: calc(100% - 1.2rem);
    height: 1.8rem;
    background-color: #fff;
    border-radius: 1rem;
    opacity: 0.85;
}
.gantanhao{
    width: .6rem;
    margin-top: .6rem;
    margin-left: .6rem;
}
.binding-wenan{
    margin-top: .6rem;
    height: .6rem;
    line-height: .6rem;
    padding-left: .3rem;
}
.go-binding{
    background-color: #d84e4d;
    color: #fff;
    padding: .1rem .2rem;
    border-radius: .3rem;
    margin-top: .5rem;
    height: .6rem;
    line-height: .6rem;
    display: inline-block;
    margin-left: .2rem;
}
.icon_close{
    width: .4rem;
    margin-top: .7rem;
    margin-left: .3rem;
}
</style>

